<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .placeholder {
        background: #00b7ff;
        width: 100%;
        height: 300px;
        border: 5px solid ghostwhite;
      }

      img {
        width: 200px;
        height: 200px;
      }

      .img_container {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="img_container">
      <img
        src="https://file.digitaling.com/eImg/uimages/20151019/1445249706879614.gif"
        data-src="https://cn.vuejs.org/images/logo.png"
        class="get_bounding_rect"
      />
      <span
        >←getBoundClientRect&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mutationObserver→</span
      >
      <img
        src="https://file.digitaling.com/eImg/uimages/20151019/1445249706879614.gif"
        data-src="https://cdn.auth0.com/blog/react-js/react.png"
        class="intersection_observer"
      />
    </div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="img_container">
      <img
        src="https://file.digitaling.com/eImg/uimages/20151019/1445249706879614.gif"
        data-src="https://cn.vuejs.org/images/logo.png"
        class="get_bounding_rect"
      />
      <span
        >←getBoundClientRect&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mutationObserver→</span
      >
      <img
        src="https://file.digitaling.com/eImg/uimages/20151019/1445249706879614.gif"
        data-src="https://cdn.auth0.com/blog/react-js/react.png"
        class="intersection_observer"
      />
    </div>
    <div class="placeholder"></div>

    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="img_container">
      <img
        src="https://file.digitaling.com/eImg/uimages/20151019/1445249706879614.gif"
        data-src="https://cn.vuejs.org/images/logo.png"
        class="get_bounding_rect"
      />
      <span
        >←getBoundClientRect&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mutationObserver→</span
      >
      <img
        src="https://file.digitaling.com/eImg/uimages/20151019/1445249706879614.gif"
        data-src="https://cdn.auth0.com/blog/react-js/react.png"
        class="intersection_observer"
      />
    </div>
    <div class="placeholder"></div>
    <script src="throttle.js"></script>
    <script src="lazyLoad.js"></script>
  </body>
</html>
